<template>
	<view class="book">
		<view class="header">
			<view class="out">
				<u-icon name="arrow-left" size="25" @click="goout"></u-icon>
			</view>
			<view class="class-list">电子书列表</view>
		</view>
		
		<view class="books"  v-for="(item,index) in list" :key="index" @click="gobookdetail"> 
			<view class="booklist">
				<view class="book-img">
					<image :src="item.cover" mode=""></image>
				</view>
				<view class="book-pic">
					<view class="top">{{item.title}}</view>
					<view class="cnt"></view>
					 <view class="botm">
						 <view class="b1"><span class='s1'>￥{{item.price}}</span> 
						<span class='s2'>￥{{item.t_price}}</span> 
					</view>
						  <view class="b2">
							  <view class="box">
							  	{{item.sub_count}}人订阅
							<!-- 	<span><u-icon name="play-circle" size="20"></u-icon></span> -->
							  </view>
						  </view>
					 </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getbook} from '@/utils/api.js'
	export default{
		data(){
			return{
				list:[],
				query:{
					page:1,
					limit:10
				},
			}
		},
		onLoad() {
			this.getlist()
		},
		methods:{
			
			// 获取电子书数据
		async getlist(){
				var res = await getbook(this.query)
				console.log('电子书数据',res);
				this.list = res.data.rows
			},
			// 点击退出
			goout(){
			  uni.navigateBack({
			  	url:'/pages/index/index'
			  })
			},
			//跳转到电子书详情
			gobookdetail(){
				uni.navigateTo({
					url:'/pages/bookdetail/bookdetail'
				})
			}
		}
	}
</script>

<style lang="less">
	.book{
		.header{
			width: 100%;
			height: 100rpx;
				line-height: 100rpx;
			display: flex;
			flex-direction: row;
			.out{
				flex: 1;
				padding-left: 20rpx;
				padding-top: 27rpx;
			}
			.class-list{
				flex: 3;
				font-size: 38rpx;
				font-weight: 600;
				margin-left: 120rpx;
			}
		}
		.books{
			width: 100%;
			height: 260rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.booklist{
				width: 95%;
				height: 220rpx;
				display: flex;
				flex-direction: row;
				.book-img{
					flex: 1.2;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.book-pic{
					flex: 2.2;
					display: flex;
					flex-direction: column;
					.top{
						flex: 1;
						padding-left: 10rpx;
					}
					.cnt{
						flex: 3;
					}
					.botm{
						flex: 2.5;
							display: flex;
							flex-direction: row;
							.b1{
								flex: 2;
								display: flex;
								justify-content: center;
								align-items: center;
								.s1{
									font-size: 40rpx;
									color: red;
								}
								.s2{
									color: #ccc;
								}
							}
							.b2{
								flex: 3;
								display: flex;
								justify-content: center;
								align-items: center;
								.box{
									width:200rpx ;
									height: 60rpx;
									border-radius: 50rpx;
									border: 2rpx solid #ccc;
									text-align: center;
									line-height: 60rpx;
									font-size: 25rpx;
								}
							}
					}
				}
			}
		}
	}
</style>